<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="demo">
    <form action="/111" @submit.prevent='submit'>
     用户名：<input type="text" placeholder="" v-model="user.username"><br>
     密码：<input type="text" placeholder="" v-model="user.password"><br>
     <span>性别:</span>
     <input type="radio" id='boy' v-model="user.sex" value='男'>
     <label for="boy">男</label>
     <input type="radio" id='girl' v-model="user.sex" value='女'>
     <label for="girl">女</label>
     <br>
     <span>爱好：</span>
     <input type="checkbox" id='basketball' v-model="user.likes" value="basketball">
     <label for="basketball">篮球</label>
     <input type="checkbox" id="football" v-model="user.likes" value="football">
     <label for="football" >足球</label>
     <input type="checkbox" id="bingpang" v-model="user.likes" value="bingpang">
     <label for="bingpang" >乒乓球</label><br>
     <span>城市：</span>
     <select name="" id="" v-model='user.cityId'>
       <option value="">请选择</option>
       <option value="" v-for='item in allCitys' :key="item.id" :value="item.id">
         {{item.name}}
       </option>
     </select><br>
     <span>介绍</span>
     <textarea name="" id="" cols="30" rows="10" v-model="user.info"></textarea><br>
     <input type="submit" value='注册'>
    </form>
  </div>
  <script src='../js/vue.js'></script>
  <script>
    new Vue({
      data:{
        user:{
          username:'',
          password:'',
          sex:'女',
          likes:['basketball','football'],
          cityId:1,
          info:''
        },
        allCitys:[
          {id:1,name:'bj'},
          {id:2,name:'wh'},
          {id:3,name:'sh'},
          {id:4,name:'sz'}
        ]
      },
      methods: {
       submit(){
         alert('提交注册的ajax请求')
       }
      }
    }).$mount('#demo')
  </script>
</body>
</html>